<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>生日快乐，妍妍(๑•̀ω•́๑)</title>
    <link href="https://fonts.googleapis.com/css?family=Work+Sans:300,400" rel="stylesheet">
    <link rel="shortcut icon" type="image/png" href="img/favicon.png"/>
    <link rel="stylesheet" href="style/style.css">
</head>

<body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript"></script>
<div id="splash" class="splash" onclick="onStart()">
    <img src="img/dangao.png" class="splash-top" width="125" height="117.4" alt=""/>
    <div class="splash-mid-w">
        <h1 class="splash-mid">好了<br/>现在轻点屏幕试试</h1>
    </div>
    <img src="img/gougou.GIF" class="splash-bottom" width="125" height="125" alt/>
</div>
<div class="container">
    <div class="one">
        <h1 class="one">Hey <span id="name">1900</span>
        </h1>
        <p class="two" id="greetingText">我还是叫你妍妍吧(≧▽≦)/ </p>
    </div>
    <div class="three">
        <p>今天是你的生日!!! :D</p>
    </div>
    <div class="four">
        <img src="img/zhihu.png" width="190" height="120" alt="">
        <div class="text-box">
            <p class="hbd-chatbox">女孩子生日都想收到什么礼物?</p>
            <p class="fake-btn">搜索</p>
        </div>
    </div>
    <div class="five">
        <p class="idea-1">我本来是想这么干来着</p>
        <p class="idea-2">但后来我停了下来</p>
        <p class="idea-3">我觉得，我必须得整点什么 <strong>特别的</strong></p>
        <p class="idea-4">因为,</p>
        <p class="idea-5">你就是特别的 <span>:)</span>
        </p>
        <p class="idea-6">
            <span>S</span> <span>O</span>
        </p>
    </div>
    <div class="six">
        <img src="img/1900.jpg" alt="" class="lydia-dp" style="border-radius: 8px" id="imagePath"> <img
            src="img/hat.svg" alt="" class="hat">
        <div class="wish">
            <h3 class="wish-hbd">生日快乐!</h3>
            <h5 id="wishText">希望你能天天开心啦~</h5>
        </div>
    </div>
    <div class="seven">
        <div class="baloons">
            <img src="img/ballon2.svg" alt=""> <img src="img/ballon1.svg" alt=""> <img src="img/ballon3.svg" alt="">
            <img src="img/ballon1.svg" alt=""> <img src="img/ballon2.svg" alt=""> <img src="img/ballon3.svg" alt="">
            <img src="img/ballon2.svg" alt=""> <img src="img/ballon3.svg" alt=""> <img src="img/ballon1.svg" alt="">
            <img src="img/ballon2.svg" alt=""> <img src="img/ballon3.svg" alt=""> <img src="img/ballon2.svg" alt="">
            <img src="img/ballon1.svg" alt=""> <img src="img/ballon3.svg" alt=""> <img src="img/ballon2.svg" alt="">
            <img src="img/ballon3.svg" alt=""> <img src="img/ballon1.svg" alt=""> <img src="img/ballon2.svg" alt="">
            <img src="img/ballon1.svg" alt=""> <img src="img/ballon3.svg" alt=""> <img src="img/ballon3.svg" alt="">
            <img src="img/ballon1.svg" alt=""> <img src="img/ballon2.svg" alt=""> <img src="img/ballon3.svg" alt="">
            <img src="img/ballon2.svg" alt=""> <img src="img/ballon1.svg" alt=""> <img src="img/ballon3.svg" alt="">
            <img src="img/ballon2.svg" alt=""> <img src="img/ballon3.svg" alt=""> <img src="img/ballon1.svg" alt="">
            <img src="img/ballon2.svg" alt=""> <img src="img/ballon1.svg" alt=""> <img src="img/ballon3.svg" alt="">
        </div>
    </div>
    <div class="eight">
        <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
            <circle cx="20" cy="20" r="20"/>
        </svg>
        <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
            <circle cx="20" cy="20" r="20"/>
        </svg>
        <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
            <circle cx="20" cy="20" r="20"/>
        </svg>
        <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
            <circle cx="20" cy="20" r="20"/>
        </svg>
        <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
            <circle cx="20" cy="20" r="20"/>
        </svg>
        <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
            <circle cx="20" cy="20" r="20"/>
        </svg>
        <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
            <circle cx="20" cy="20" r="20"/>
        </svg>
        <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
            <circle cx="20" cy="20" r="20"/>
        </svg>
        <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
            <circle cx="20" cy="20" r="20"/>
        </svg>
    </div>
    <div class="nine">
        <p>好吧，现在回来告诉我你喜欢不喜欢~</p>
        <p id="replay">如果你想再看一遍，点一下就好啦~</p>
        <p class="last-smile">:)</p>
    </div>
</div>
<audio id="audio" src="music/PlayingLove.mp3" preload loop>
</audio>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script type="application/javascript" src="script/main.js"></script>
</html>
